<template>
    <d2-container>
        <el-form ref="filtersForm" :model="form">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item>
                        <el-input placeholder="名称" v-model="form.title"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                      <el-select style="width:100%;" v-model="form.status" placeholder="是否上线">
                        <el-option label="下线" :value="0"></el-option>
                        <el-option label="上线" :value="1"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                      <el-select
                        clearable 
                        style="width:100%;"
                        v-model="form.store"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入门店"
                        :remote-method="fnStoreList"
                        :loading="loading">
                        <el-option
                          v-for="item in storeList"
                          :key="item._id"
                          :label="item.name"
                          :value="item._id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="filterSearch('filtersForm')">搜索</el-button>
                    <el-button @click="resetForm('filtersForm')">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="muse_table_box">
            <div class="muse_control_box">
                <el-button class="muse_float_left" type="primary" @click="addData">添加</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column prop="title" label="标题"/>
                <!-- <el-table-column prop="originalPrice" label="原价"/>
                <el-table-column prop="discountPrice" label="现价"/> -->
                <el-table-column prop="point" label="积分"/>
                <el-table-column prop="useExpireType" label="有效类型">
                    <template slot-scope="scope">
                        {{ scope.row.useExpireType === 0?'永久有效':'限时有效' }}
                    </template>
                </el-table-column>
                <el-table-column prop="useExpireDay" label="有效时间"/>
                <el-table-column prop="totalCount" label="总发行量"/>
                <el-table-column prop="limit" label="限购数量"/>
                <el-table-column prop="buyStartDate" label="开始购买时间">
                    <template slot-scope="scope">
                        {{ scope.row.buyStartDate | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column prop="buyExpireDate" label="购买截至时间">
                    <template slot-scope="scope">
                        {{ scope.row.buyExpireDate | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column prop="useStartDate" label="开始使用时间">
                    <template slot-scope="scope">
                        {{ scope.row.useStartDate | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column prop="useExpireDate" label="使用截至时间">
                    <template slot-scope="scope">
                        {{ scope.row.useExpireDate | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="160">
                    <template slot-scope="scope">
                        <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button v-if="scope.row.status === 0" @click="voucherOnshelf(scope.row)" type="text" size="small">上线</el-button>
                        <el-button v-if="scope.row.status === 1" @click="voucherOffShelf(scope.row)" type="text" size="small">下线</el-button>
                        <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
        </div>
    </d2-container>
</template>

<script>
  import tableMixin from '../mixins/tableMixin'
  import { getVoucherList, deleteVoucher, voucherOnshelf, voucherOffShelf, getStoreList } from '@/api/admin'
  export default {
    name: 'voucherList',
    mixins: [tableMixin],
    data () {
      return {
        form: {},
        tableData: [],
        loading: false,
        storeList: []
      }
    },
    created () {
      this.getTableData()
    },
    beforeRouteEnter(to, from, next) {
      next(vm=>{
        vm.getTableData()
      })
    },
    methods: {
      // 获取列表数据
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        params = Object.assign({}, params, this.form)
        const { code, data: { total, currentPage, data, pageSize } } = await getVoucherList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        this.tableData = data
      },
      // 添加数据
      addData () {
        this.$router.push({name: 'changeVoucher'})
      },
      // 编辑该行
      editRow(row) {
        this.$router.push({name: 'changeVoucher', query: { id: row._id}})
      },
      voucherOnshelf(row) {
        this.wrapConfirm(-1, "确定要上线该兑换券？")
        .then(async () => {
          await voucherOnshelf({ id: row._id });
          this.getTableData();
        })
        .catch(() => {});
      },
      voucherOffShelf(row) {
        this.wrapConfirm(-1, "确定要下线该兑换券？")
        .then(async () => {
          await voucherOffShelf({ id: row._id });
          this.getTableData();
        })
        .catch(() => {});
      },
      // 删除该行
      deleteRow(row) {
        this.wrapConfirm(4).then( async () => {
          const res =  await deleteVoucher({id: row._id})
          this.getTableData()
        }).catch(() => {})
      },
      async fnStoreList(e) {
        const params = {
          name: e
        }
        this.loading = true
        const { data: { data }} = await getStoreList(params)
        this.loading = false
        this.storeList = data
      }
    }
  }
</script>

<style scoped>

</style>
